<template>
  <a-layout>
  <a-layout-header>
    <i-search :searchOptions='searchOptions' @searchSubmitFun="searchSubmitFun" @resetSubmitFun="resetSubmitFun"></i-search>
  </a-layout-header>
  <a-layout-content>
    <IVxeTable :tableData="tableData" ref="tableRef" @addFun="addFun" @updateFun="updateFun" @deleteFun="deleteFun" @selectCheckFun="selectCheckFun">
        <template #status_template="{ obj }">
             {{obj.status === '0' ? '离职' : '在职'}}
        </template>
    </IVxeTable>
    <IDialog :dialogData="dialogData">
                <i-form ref="myForm" :dataForm="dataForm"></i-form>
    </IDialog>
    <lib-doc :libDocData="libDocData"></lib-doc>
  </a-layout-content>
</a-layout>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { IDialog, IForm, ISearch, IVxeTable } from 'wd-platform-library'
import { DialogDataInterface } from 'wd-platform-library/lib/src/IDialog/src/IDialogInterFace'
import { FormDataInterFace, FormInterFace } from 'wd-platform-library/lib/src/IForm/src/IFormInterFace'
import { RegExpValid, regexpPromiseMsg } from 'wd-platform-utils'
import { RuleObject } from 'ant-design-vue/lib/form/interface'
import { TableDataInterFace, ResultInterFace } from 'wd-platform-library/lib/src/IVxeTable/src/IVxeTableInterFace'
import { SearchInterFace } from 'wd-platform-library/lib/src/ISearch/src/ISearchInterFace'
import moment, { Moment } from 'moment'
import LibDoc from '@/components/LibDoc.vue'
import { LibDocInterface } from '@/service/LibDocService'
interface SearchParam {
  name: string;
  city: string|null;
  birthday: string[]|null;
  orgIds:string[]|null
}
interface DataFormInterface {
  name: string;
  age: string;
  mobile:string;
  sex: string|null;
  city:string|null;
  proper:string|null;
  orgIds: string[]|null;
  birthday:Moment|null;
  status:string|null
}
interface TableResultInterface {
  name: string;
  age: string;
  mobile:string;
  sex: string;
  city:string;
  proper:string;
  orgName: string;
  orgIds:string[];
  birthday:string;
  status:string;
  disable?:boolean;
}
export default defineComponent({
    name: 'i_table_dialog_form_demo',
    setup () {
        const dataList = [
            {
                id: '10891065345474561',
                menuName: '权限管理',
                children: [
                    {
                        id: '10948510534696991',
                        menuName: '角色管理'
                    },
                    {
                        id: '10948510534697001',
                        menuName: '菜单管理'
                    },
                    {
                        id: '10948510534697011',
                        menuName: '用户管理'
                    },
                    {
                        id: '10948510534697021',
                        menuName: '资源管理'
                    },
                    {
                        id: '10948510534697031',
                        menuName: '资源组管理'
                    }
                ]
            },
            {
                id: '10948510534696971',
                menuName: '系统管理',
                children: [
                    {
                        id: '10948510534697041',
                        menuName: '应用管理'
                    },
                    {
                        id: '1094851053469705',
                        menuName: '机构管理'
                    }
                ]
            }
        ]
        const myForm = ref()
        // 弹框属性-------------------------------------------------------
        const dialogData = reactive<DialogDataInterface>({
            width: 800, // 弹框宽度
            show: false, // 弹框是否展示
            title: '弹窗标题', // 弹框名字
            onSubmit: async () => {
                const sleep = (millisecond:number) => {
                    return new Promise((resolve) => {
                        setTimeout(() => {
                            resolve(true)
                        }, millisecond)
                    })
                }
                await myForm.value.onSubmit().then(async (res: any) => {
                    await sleep(2000)
                    dialogData.onCancel && dialogData.onCancel()
                }).catch(() => { console.log() })
            },
            onCancel: () => {
                myForm.value.resetForm()
                dataForm.form = {
                    name: '',
                    age: '',
                    sex: null,
                    city: null,
                    mobile: '',
                    proper: null,
                    orgIds: null,
                    birthday: null,
                    status: '0'
                }
                dialogData.show = false
            }
        })
        // 搜索条件  -------------------------------------------------------
        const searchOptions: SearchInterFace<SearchParam> = reactive({
            form: {
                name: '',
                city: null,
                birthday: null,
                jobTime: null,
                orgIds: null
            },
            fieldDataList: [
                {
                    labelWidth: 70,
                    type: 'input', // form表单类型
                    label: '姓名', // 字段描述信息
                    field: 'name' // form 对应字段
                },
                {
                    labelWidth: 70,
                    type: 'select', // form表单类型
                    label: '城市', // 字段描述信息
                    field: 'city', // form 对应字段
                    dataList: [
                        {
                            label: '北京',
                            value: 'bj'
                        },
                        {
                            label: '河南',
                            value: 'hn'
                        },
                        {
                            label: '河北',
                            value: 'hb'
                        }
                    ],
                    callback: (data: any, fieldDataItem: any) => {
                        alert('我选择了' + data + '  返回当前对象:' + JSON.stringify(fieldDataItem))
                    }
                },
                {
                    labelWidth: 70,
                    type: 'rangePicker', // form表单类型
                    label: '生日', // 字段描述信息
                    field: 'birthday' // form 对应字段
                },
                {
                    labelWidth: 90,
                    type: 'cascader', // form表单类型
                    label: '机构', // 字段描述信息
                    field: 'orgId', // form 对应字段
                    options: {
                        fieldNames: {
                            label: 'menuName',
                            value: 'id',
                            children: 'children'
                        }
                    },
                    callback: (data: any) => {
                        alert(data)
                    },
                    dataList: dataList
                }
            ]
        })
        // 搜索条件查询
        const searchSubmitFun = () => {
            alert('搜索条件:   ' + JSON.stringify(searchOptions.form))
            tableRef.value.initSelectTableList()
        }
        // 搜索条件重置
        const resetSubmitFun = () => {
            searchOptions.form = {
                name: '',
                city: null,
                birthday: null,
                orgIds: null
            }
            tableRef.value.initSelectTableList()
        }
        // 表单属性------------------------------------
        const dataForm: FormInterFace<DataFormInterface> = reactive({
            labelWidth: 3, // 文本宽度
            form: {
                name: '',
                age: '',
                sex: '0',
                city: null,
                mobile: '',
                proper: null,
                orgIds: null,
                birthday: null,
                status: '0'
            },
            fieldDataList: [
                {
                    type: 'input', // form表单类型
                    label: '姓名', // 字段描述信息
                    field: 'name', // form 对应字段
                    rules: [
                        {
                            required: true,
                            message: '请输入姓名',
                            trigger: 'blur'
                        }
                    ],
                    options: {
                        maxlength: 20
                    }
                },
                {
                    type: 'input', // form表单类型
                    label: '工作手机号', // 字段描述信息
                    field: 'mobile', // form 对应字段
                    rules: [
                        {
                            required: true,
                            message: '请输入工作手机号',
                            trigger: 'blur'
                        },
                        {
                            validator: (rule:RuleObject, value:string) => {
                                return regexpPromiseMsg(RegExpValid.REGEX_MOBILE, value, '手机号不正确')
                            },
                            trigger: 'blur'
                        }
                    ],
                    options: {
                        maxlength: 11
                    }
                },
                {
                    type: 'radio', // form表单类型
                    label: '性别', // 字段描述信息
                    field: 'sex', // form 对应字段
                    rules: [
                        {
                            required: true,
                            message: '请选择性别',
                            trigger: 'blur'
                        }
                    ],
                    dataList: [
                        {
                            label: '男',
                            value: '0'
                        },
                        {
                            label: '女',
                            value: '1'
                        }
                    ]
                },
                {
                    type: 'select', // form表单类型
                    label: '省份', // 字段描述信息
                    field: 'city', // form 对应字段
                    rules: [
                        {
                            required: true,
                            message: '请输入城市',
                            trigger: 'blur'
                        }
                    ],
                    dataList: [
                        {
                            label: '北京',
                            value: 'bj'
                        },
                        {
                            label: '河南',
                            value: 'hn'
                        },
                        {
                            label: '河北',
                            value: 'hb'
                        }
                    ],
                    callback: (data: any) => {
                        alert(data)
                        dataForm.fieldDataList.forEach((item: FormDataInterFace) => {
                            if (item.field === 'proper') {
                                item.dataList = [
                                    {
                                        label: '海淀区',
                                        value: 'haidianqu'
                                    },
                                    {
                                        label: '朝阳区',
                                        value: 'chaoyangqu'
                                    },
                                    {
                                        label: '石景山',
                                        value: 'shijingshan'
                                    },
                                    {
                                        label: '昌平区',
                                        value: 'changping'
                                    }
                                ]
                            }
                        })
                    }
                },
                {
                    type: 'select', // form表单类型
                    label: '城市', // 字段描述信息
                    field: 'proper', // form 对应字段
                    dataList: [],
                    rules: [
                        {
                            required: true,
                            message: '请输入地区',
                            trigger: 'blur'
                        }
                    ]
                },
                {
                    type: 'radio', // form表单类型
                    label: '状态', // 字段描述信息
                    field: 'status', // form 对应字段
                    dataList: [
                        {
                            label: '正常',
                            value: '0'
                        },
                        {
                            label: '停用',
                            value: '1'
                        }
                    ]
                },
                {
                    type: 'datePicker', // form表单类型
                    label: '生日', // 字段描述信息
                    field: 'birthday' // form 对应字段
                },
                {
                    type: 'cascader', // form表单类型
                    label: '机构', // 字段描述信息
                    field: 'orgIds', // form 对应字段
                    options: {
                        fieldNames: {
                            label: 'menuName',
                            value: 'id',
                            children: 'children'
                        }
                    },
                    callback: (data: any) => {
                        alert(data)
                    },
                    dataList: dataList
                }
            ]
        })

        // 表格属性-----------------------------
        const tableRef = ref()
        const tableData = reactive<TableDataInterFace>({
            type: 'dialog-table-demo', // 每个表格唯一表示符
            tableInfo: {
                columns: [
                    {
                        field: 'name',
                        minWidth: 80,
                        title: '用户姓名'
                    },
                    {
                        field: 'age',
                        minWidth: 120,
                        title: '年龄'
                    },
                    {
                        field: 'mobile',
                        minWidth: 120,
                        title: '手机号'
                    },
                    {
                        field: 'city',
                        minWidth: 100,
                        title: '省份'
                    },
                    {
                        field: 'proper',
                        minWidth: 100,
                        title: '城市'
                    },
                    {
                        field: 'orgName',
                        minWidth: 100,
                        title: '机构名称'
                    },
                    {
                        field: 'birthday',
                        minWidth: 100,
                        format: 'time',
                        title: '生日'
                    },
                    {
                        field: 'status',
                        width: 80,
                        slots: {
                            default: 'status_template'
                        },
                        title: '人员状态'
                    }
                ], // 表头配置
                data: [], // 数据集合
                maxHeight: 550
            },
            callback: async (pageInfo: any) => {
                /**
                 * 此处调用接口
                 */
                var userList = []
                for (let index = 0; index < 20; index++) {
                    userList.push({
                        name: (searchOptions.form.name || '小刀刀') + index,
                        age: index,
                        mobile: '1509334317' + (index < 10 ? '0' + index : index),
                        sex: index % 2 === 0 ? '1' : '0',
                        city: index % 2 === 0 ? '河南' : '北京',
                        proper: index % 2 === 0 ? '郑州' : '石家庄',
                        orgName: '测试机构',
                        birthday: parseInt((Date.now() / 1000).toString()),
                        jobTime: [parseInt((Date.now() / 1000).toString()), parseInt((Date.now() / 1000).toString())],
                        status: index % 2 === 0 ? '1' : '0',
                        disable: index === 5,
                        orgIds: ['10891065345474561', '10948510534697021']
                    })
                }
                return {
                    total: 20,
                    resultList: userList
                } as ResultInterFace<TableResultInterface>
            },
            titleOperation: [
                {
                    label: '新增',
                    isShow: true,
                    buttonFun: 'addFun'
                },
                {
                    label: '获取选中',
                    isShow: true,
                    position: 'right',
                    buttonFun: 'selectCheckFun'
                }
            ],
            operation: {
                label: '操作',
                dataList: [
                    {
                        label: '编辑',
                        isShow: true,
                        buttonFun: 'updateFun',
                        width: 48
                    },
                    {
                        label: '删除',
                        isShow: true,
                        buttonFun: 'deleteFun',
                        width: 48,
                        remindData: {
                            isShow: true,
                            remindTitle: '是否删除',
                            remindContext: '删除后数据将无法恢复'
                        }
                    }
                ]
            },
            authControl: {
                // isAutoSelect: false,
                isCheckBox: true
            }
        })
        // 添加
        const addFun = () => {
            dialogData.title = '添加数据'
            dialogData.show = true
        }
        // 修改
        const updateFun = (data: TableResultInterface) => {
            dialogData.title = '编辑数据'
            dataForm.form = {
                name: data.name,
                age: data.age,
                sex: data.sex,
                city: data.city,
                mobile: data.mobile,
                proper: data.proper,
                orgIds: data.orgIds,
                birthday: data.birthday ? moment(parseInt(data.birthday) * 1000) : null,
                status: data.status
            }
            dialogData.title = '编辑应用'
            dialogData.show = true
            alert('点击编辑' + JSON.stringify(data))
        }
        // 删除
        const deleteFun = (data: any) => {
            alert('点击删除' + JSON.stringify(data))
        }
        // 表格获取选中
        const selectCheckFun = (dataList: Array<any>) => {
            alert('获取选中' + dataList)
        }

        const libDocData: LibDocInterface = {
            title: '代码示例',
            docList: [
                {
                    label: '整体代码',
                    type: 'pre',
                    value: `
<template>
  <a-layout>
  <a-layout-header>
    <i-search :searchOptions='searchOptions' @searchSubmitFun="searchSubmitFun" @resetSubmitFun="resetSubmitFun"></i-search>
  </a-layout-header>
  <a-layout-content>
    <IVxeTable :tableData="tableData" ref="tableRef" @addFun="addFun" @updateFun="updateFun" @deleteFun="deleteFun" @selectCheckFun="selectCheckFun">
        <template #status_template="{ obj }">
             {{obj.status === '0' ? '离职' : '在职'}}
        </template>
    </IVxeTable>
    <IDialog :dialogData="dialogData">
                <i-form ref="myForm" :dataForm="dataForm"></i-form>
    </IDialog>
  </a-layout-content>
</a-layout>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { IDialog, IForm, ISearch, IVxeTable } from 'wd-platform-library'
import { DialogDataInterface } from 'wd-platform-library/lib/src/IDialog/src/IDialogInterFace'
import { FormDataInterFace, FormInterFace } from 'wd-platform-library/lib/src/IForm/src/IFormInterFace'
import { RegExpValid, regexpPromiseMsg } from 'wd-platform-utils'
import { RuleObject } from 'ant-design-vue/lib/form/interface'
import { TableDataInterFace, ResultInterFace } from 'wd-platform-library/lib/src/IVxeTable/src/IVxeTableInterFace'
import { SearchInterFace } from 'wd-platform-library/lib/src/ISearch/src/ISearchInterFace'
import moment, { Moment } from 'moment'
interface SearchParam {
  name: string;
  city: string|null;
  birthday: string[]|null;
  orgIds:string[]|null
}
interface DataFormInterface {
  name: string;
  age: string;
  mobile:string;
  sex: string|null;
  city:string|null;
  proper:string|null;
  orgIds: string[]|null;
  birthday:Moment|null;
  status:string|null
}
interface TableResultInterface {
  name: string;
  age: string;
  mobile:string;
  sex: string;
  city:string;
  proper:string;
  orgName: string;
  orgIds:string[];
  birthday:string;
  status:string;
  disable?:boolean;
}
export default defineComponent({
    name: 'i_table_dialog_form_demo',
    setup () {
        const dataList = [
            {
                id: '10891065345474561',
                menuName: '权限管理',
                children: [
                    {
                        id: '10948510534696991',
                        menuName: '角色管理'
                    },
                    {
                        id: '10948510534697001',
                        menuName: '菜单管理'
                    },
                    {
                        id: '10948510534697011',
                        menuName: '用户管理'
                    },
                    {
                        id: '10948510534697021',
                        menuName: '资源管理'
                    },
                    {
                        id: '10948510534697031',
                        menuName: '资源组管理'
                    }
                ]
            },
            {
                id: '10948510534696971',
                menuName: '系统管理',
                children: [
                    {
                        id: '10948510534697041',
                        menuName: '应用管理'
                    },
                    {
                        id: '1094851053469705',
                        menuName: '机构管理'
                    }
                ]
            }
        ]
        const myForm = ref()
        // 弹框属性-------------------------------------------------------
       const dialogData = reactive<DialogDataInterface>({
            width: 800, // 弹框宽度
            show: false, // 弹框是否展示
            title: '弹窗标题', // 弹框名字
            onSubmit: async () => {
                const sleep = (millisecond:number) => {
                    return new Promise((resolve) => {
                        setTimeout(() => {
                            resolve(true)
                        }, millisecond)
                    })
                }
                await myForm.value.onSubmit().then(async (res: any) => {
                    await sleep(2000)
                    dialogData.onCancel && dialogData.onCancel()
                }).catch(() => {})
            },
            onCancel: () => {
                myForm.value.resetForm()
                dataForm.form = {
                    name: '',
                    age: '',
                    sex: null,
                    city: null,
                    mobile: '',
                    proper: null,
                    orgIds: null,
                    birthday: null,
                    status: '0'
                }
                dialogData.show = false
            }
        })
        // 搜索条件  -------------------------------------------------------
        const searchOptions: SearchInterFace<SearchParam> = reactive({
            form: {
                name: '',
                city: null,
                birthday: null,
                jobTime: null,
                orgIds: null
            },
            fieldDataList: [
                {
                    labelWidth: 70,
                    type: 'input', // form表单类型
                    label: '姓名', // 字段描述信息
                    field: 'name' // form 对应字段
                },
                {
                    labelWidth: 70,
                    type: 'select', // form表单类型
                    label: '城市', // 字段描述信息
                    field: 'city', // form 对应字段
                    dataList: [
                        {
                            label: '北京',
                            value: 'bj'
                        },
                        {
                            label: '河南',
                            value: 'hn'
                        },
                        {
                            label: '河北',
                            value: 'hb'
                        }
                    ],
                    callback: (data: any, fieldDataItem: any) => {
                        alert('我选择了' + data + '  返回当前对象:' + JSON.stringify(fieldDataItem))
                    }
                },
                {
                    labelWidth: 70,
                    type: 'rangePicker', // form表单类型
                    label: '生日', // 字段描述信息
                    field: 'birthday' // form 对应字段
                },
                {
                    labelWidth: 90,
                    type: 'cascader', // form表单类型
                    label: '机构', // 字段描述信息
                    field: 'orgId', // form 对应字段
                    options: {
                        fieldNames: {
                            label: 'menuName',
                            value: 'id',
                            children: 'children'
                        }
                    },
                    callback: (data: any) => {
                        alert(data)
                    },
                    dataList: dataList
                }
            ]
        })
        // 搜索条件查询
        const searchSubmitFun = () => {
            alert('搜索条件:   ' + JSON.stringify(searchOptions.form))
            tableRef.value.initSelectTableList()
        }
        // 搜索条件重置
        const resetSubmitFun = () => {
            searchOptions.form = {
                name: '',
                city: null,
                birthday: null,
                orgIds: null
            }
            tableRef.value.initSelectTableList()
        }
        // 表单属性------------------------------------
        const dataForm: FormInterFace<DataFormInterface> = reactive({
            labelWidth: 80, // 文本宽度
            form: {
                name: '',
                age: '',
                sex: '0',
                city: null,
                mobile: '',
                proper: null,
                orgIds: null,
                birthday: null,
                status: '0'
            },
            fieldDataList: [
                {
                    type: 'input', // form表单类型
                    label: '姓名', // 字段描述信息
                    field: 'name', // form 对应字段
                    rules: [
                        {
                            required: true,
                            message: '请输入姓名',
                            trigger: 'blur'
                        }
                    ],
                    options: {
                        maxlength: 20
                    }
                },
                {
                    type: 'input', // form表单类型
                    label: '工作手机号', // 字段描述信息
                    field: 'mobile', // form 对应字段
                    rules: [
                        {
                            required: true,
                            message: '请输入工作手机号',
                            trigger: 'blur'
                        },
                        {
                            validator: (rule:RuleObject, value:string) => {
                                return regexpPromiseMsg(RegExpValid.REGEX_MOBILE, value, '手机号不正确')
                            },
                            trigger: 'blur'
                        }
                    ],
                    options: {
                        maxlength: 11
                    }
                },
                {
                    type: 'radio', // form表单类型
                    label: '性别', // 字段描述信息
                    field: 'sex', // form 对应字段
                    rules: [
                        {
                            required: true,
                            message: '请选择性别',
                            trigger: 'blur'
                        }
                    ],
                    dataList: [
                        {
                            label: '男',
                            value: '0'
                        },
                        {
                            label: '女',
                            value: '1'
                        }
                    ]
                },
                {
                    type: 'select', // form表单类型
                    label: '省份', // 字段描述信息
                    field: 'city', // form 对应字段
                    rules: [
                        {
                            required: true,
                            message: '请输入城市',
                            trigger: 'blur'
                        }
                    ],
                    dataList: [
                        {
                            label: '北京',
                            value: 'bj'
                        },
                        {
                            label: '河南',
                            value: 'hn'
                        },
                        {
                            label: '河北',
                            value: 'hb'
                        }
                    ],
                    callback: (data: any) => {
                        alert(data)
                        dataForm.fieldDataList.forEach((item: FormDataInterFace) => {
                            if (item.field === 'proper') {
                                item.dataList = [
                                    {
                                        label: '海淀区',
                                        value: 'haidianqu'
                                    },
                                    {
                                        label: '朝阳区',
                                        value: 'chaoyangqu'
                                    },
                                    {
                                        label: '石景山',
                                        value: 'shijingshan'
                                    },
                                    {
                                        label: '昌平区',
                                        value: 'changping'
                                    }
                                ]
                            }
                        })
                    }
                },
                {
                    type: 'select', // form表单类型
                    label: '城市', // 字段描述信息
                    field: 'proper', // form 对应字段
                    dataList: [],
                    rules: [
                        {
                            required: true,
                            message: '请输入地区',
                            trigger: 'blur'
                        }
                    ]
                },
                {
                    type: 'radio', // form表单类型
                    label: '状态', // 字段描述信息
                    field: 'status', // form 对应字段
                    dataList: [
                        {
                            label: '正常',
                            value: '0'
                        },
                        {
                            label: '停用',
                            value: '1'
                        }
                    ]
                },
                {
                    type: 'datePicker', // form表单类型
                    label: '生日', // 字段描述信息
                    field: 'birthday' // form 对应字段
                },
                {
                    type: 'cascader', // form表单类型
                    label: '机构', // 字段描述信息
                    field: 'orgIds', // form 对应字段
                    options: {
                        fieldNames: {
                            label: 'menuName',
                            value: 'id',
                            children: 'children'
                        }
                    },
                    callback: (data: any) => {
                        alert(data)
                    },
                    dataList: dataList
                }
            ]
        })

        // 表格属性-----------------------------
        const tableRef = ref()
        const tableData = reactive<TableDataInterFace>({
            type: 'dialog-table-demo', // 每个表格唯一表示符
            tableInfo: {
                columns: [
                    {
                        field: 'name',
                        minWidth: 80,
                        title: '用户姓名'
                    },
                    {
                        field: 'age',
                        minWidth: 120,
                        title: '年龄'
                    },
                    {
                        field: 'mobile',
                        minWidth: 120,
                        title: '手机号'
                    },
                    {
                        field: 'city',
                        minWidth: 100,
                        title: '省份'
                    },
                    {
                        field: 'proper',
                        minWidth: 100,
                        title: '城市'
                    },
                    {
                        field: 'orgName',
                        minWidth: 100,
                        title: '机构名称'
                    },
                    {
                        field: 'birthday',
                        minWidth: 100,
                        format: 'time',
                        title: '生日'
                    },
                    {
                        field: 'status',
                        width: 80,
                        slots: {
                            default: 'status_template'
                        },
                        title: '人员状态'
                    }
                ], // 表头配置
                data: [], // 数据集合
                maxHeight: 550
            },
            callback: async (pageInfo: any) => {
                /**
                 * 此处调用接口
                 */
                var userList = []
                for (let index = 0; index < 20; index++) {
                    userList.push({
                        name: (searchOptions.form.name || '小刀刀') + index,
                        age: index,
                        mobile: '1509334317' + (index < 10 ? '0' + index : index),
                        sex: index % 2 === 0 ? '1' : '0',
                        city: index % 2 === 0 ? '河南' : '北京',
                        proper: index % 2 === 0 ? '郑州' : '石家庄',
                        orgName: '测试机构',
                        birthday: parseInt((Date.now() / 1000).toString()),
                        jobTime: [parseInt((Date.now() / 1000).toString()), parseInt((Date.now() / 1000).toString())],
                        status: index % 2 === 0 ? '1' : '0',
                        disable: index === 5,
                        orgIds: ['10891065345474561', '10948510534697021']
                    })
                }
                return {
                    total: 20,
                    resultList: userList
                } as ResultInterFace<TableResultInterface>
            },
            titleOperation: [
                {
                    label: '新增',
                    isShow: true,
                    buttonFun: 'addFun'
                },
                {
                    label: '获取选中',
                    isShow: true,
                    position: 'right',
                    buttonFun: 'selectCheckFun'
                }
            ],
            operation: {
                label: '操作',
                dataList: [
                    {
                        label: '编辑',
                        isShow: true,
                        buttonFun: 'updateFun',
                        width: 48
                    },
                    {
                        label: '删除',
                        isShow: true,
                        buttonFun: 'deleteFun',
                        width: 48,
                        remindData: {
                            isShow: true,
                            remindTitle: '是否删除',
                            remindContext: '删除后数据将无法恢复'
                        }
                    }
                ]
            },
            authControl: {
                // isAutoSelect: false,
                isCheckBox: true
            }
        })
        // 添加
        const addFun = () => {
            dialogData.title = '添加数据'
            dialogData.show = true
        }
        // 修改
        const updateFun = (data: TableResultInterface) => {
            dialogData.title = '编辑数据'
            dataForm.form = {
                name: data.name,
                age: data.age,
                sex: data.sex,
                city: data.city,
                mobile: data.mobile,
                proper: data.proper,
                orgIds: data.orgIds,
                birthday: data.birthday ? moment(parseInt(data.birthday) * 1000) : null,
                status: data.status
            }
            dialogData.title = '编辑应用'
            dialogData.show = true
            alert('点击编辑' + JSON.stringify(data))
        }
        // 删除
        const deleteFun = (data: any) => {
            alert('点击删除' + JSON.stringify(data))
        }
        // 表格获取选中
        const selectCheckFun = (dataList: Array<any>) => {
            alert('获取选中' + dataList)
        }
        return {
            resetSubmitFun,
            searchSubmitFun,
            selectCheckFun,
            addFun,
            updateFun,
            deleteFun,
            tableRef,
            tableData,
            searchOptions,
            dataForm,
            myForm,
            dialogData
        }
    },
    components: {
        IDialog,
        IForm,
        IVxeTable,
        ISearch
    }
})
<script>`
                }
            ]
        }
        return {
            resetSubmitFun,
            searchSubmitFun,
            selectCheckFun,
            addFun,
            updateFun,
            deleteFun,
            libDocData,
            tableRef,
            tableData,
            searchOptions,
            dataForm,
            myForm,
            dialogData
        }
    },
    components: {
        LibDoc,
        IDialog,
        IForm,
        IVxeTable,
        ISearch
    }
})
</script>
